<template>
  <div class="bottom-menu">
      <router-link to="/">
          <div :class="{ 'item-menu': true}">
              <span class="home-icon"></span>
              <div class="tag">
                  <span>首页</span>
              </div>
          </div>
      </router-link>
      <router-link to="/bless">
          <div :class="{ 'item-menu': true}">
              <span class="zhufu-icon"></span>
              <div class="tag">
                  <span>祝福</span>
              </div>
          </div>
     </router-link>
<!--      <router-link to="/witness">
          <div :class="{ 'item-menu': true,'active': active_menu_nth[2]}">
              <span class="jianzh-icon"></span>
              <div class="tag">
                  <span>见证</span>
              </div>
          </div>
      </router-link>-->
  </div>
</template>

<script>
export default {
    name: 'bottom-menu',
    props: {
        active_menu_nth: {
            type: Array,
            required: true,
            default: function() {
                return [1,0,0]
            }
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .bottom-menu {
        position: fixed!important;
        text-align: center;
        height: 9.6rem;
        width: 100%;
        bottom: 0;
        z-index: 666;
        display: flex;
        justify-content: space-between;
    }
    .bottom-menu:before,
    .bottom-menu:after{
        content: "";
    }
    .item-menu>span {
        display: inline-block;
        width: 7rem;
        height: 7rem;
    }
    .zhufu-icon{
        background: rgba(210,73,83,0) url("../assets/icon/zhufu-0.png") no-repeat center 100% ;
    }
    .jianzh-icon {
        background: rgba(210,73,83,0) url("../assets/icon/jianzheng-0.png") no-repeat center 100% ;
    }
    .home-icon {
        background: rgba(210,73,83,0) url("../assets/icon/home-0.png") no-repeat center 100% ;
    }

    .active .zhufu-icon {
        background: rgba(210,73,83,0) url("../assets/icon/zhufu-1.png") no-repeat center 100%!important;
    }
    .active .jianzh-icon{
        background: rgba(210,73,83,0) url("../assets/icon/jianzheng-1.png") no-repeat center 100%!important;
    }
    .active .home-icon  {
        background: rgba(210,73,83,0) url("../assets/icon/home-1.png") no-repeat center 100%!important;
    }
    .bottom-menu a {
        text-decoration: none;
     }
    .tag>span {
        font-size: 1.6rem;
        background-color: rgba(222,200,82,0) ;
        border: 0;
        color: #dec852;
        border-radius: 0.5rem;
    }
    .active .tag>span {
        color: #de5b52;
    }
</style>
